import React, { Component } from 'react';
import { connect } from 'dva';
import Link from 'umi/link';
import { Form, Input, Checkbox, Alert, Icon, Button } from 'antd';
import styles from './Login.less';

@connect(({ login, loading }) => ({
  login,
  submitting: loading.effects['login/login'],
}))
@Form.create()
class LoginPage extends Component {

  handleSubmit = (e) => {
    const { form } = this.props;
    e.preventDefault();
    form.validateFields((err, values)=>{
      if(!err){
        const { dispatch } = this.props;
        dispatch({
          type: 'login/login',
          payload: {
            ...values,
          },
        });
      }
    })
  };

  render() {
    const { login, submitting, form } = this.props;
    return (
      <div className={styles.main}>
        {login.status === 'error' &&
        !submitting &&
        <Alert style={{ marginBottom: 24 }} message={login.errMsg} type="error" showIcon />}
        <Form onSubmit={this.handleSubmit.bind(this)}>
          <Form.Item className={styles.formItem}>
            {
              form.getFieldDecorator('account', {
                rules: [{required: true, message: '请输入账号'}]
              })(
                <Input prefix={<Icon type={'user'} className={styles.input}></Icon>} placeholder='账号'/>
              )
            }
          </Form.Item>
          <Form.Item className={styles.formItem}>
            {
              form.getFieldDecorator('password', {
                rules: [{required: true, message: '请输入密码'}]
              })(
                <Input type='password' prefix={<Icon type={'lock'} className={styles.input}></Icon>} placeholder='密码'/>
              )
            }
          </Form.Item>
          <Form.Item>
            {form.getFieldDecorator('remember', {
              valuePropName: 'checked',
              initialValue: true,
            })(
              <Checkbox>记住我</Checkbox>
            )}
            <Link className={styles.forget} to='/user/forget'>忘记密码</Link>
            <Button className={styles.btnSubmit} type="primary" htmlType="submit">
              登录
            </Button>
            <Link className={styles.register} to='/user/register'>立即注册</Link>
          </Form.Item>
        </Form>
      </div>
    );
  }
}

export default LoginPage;
